<template>
    <div class="">
        <div class="top_btn_list">
            <div class="cancel" @click="returnTap">取消</div>
            <div class="title">{{ispublish?'':'发表文字'}}</div>
            <div class="publish_btn">发表</div>
        </div>
        <div class="input_text">
         <textarea name="" id="textarea" placeholder="这一刻的想法..."></textarea>
        </div>
         <div class="main_pictures" v-if="ispublish">
                <div v-for="(item,index) in picList " :key="index">
                <img src="../../../../static/images/me/headimg.png" class="main_pictures_lattice" alt="">
                </div>
                <div class="add_box">
                    <img src="../../../../static/images/me/add.png" alt="" @click="isshowpublish = true">
                </div>
                
        </div>
        <div class="list border_top">
            <div class="list_left ">
            <img src="../../../../static/images/me/location.png" alt="" class="location_icon">
            <span class="list_title">所在位置</span>
            </div>
           
            <img src="../../../../static/images/me/more.jpg" alt="" class="more_icon">
        </div>
         <div class="list" @click="skipto">
            <div class="list_left">
                 <img src="../../../../static/images/me/chat.png" alt="" class="location_icon">
            <span class="list_title">谁可以看</span>
            </div>
            <div class="list_left">
                <span>全部</span>
            <img src="../../../../static/images/me/more.jpg" alt="" class="more_icon">
            </div>
        </div>
   <bottomList v-if="isshowpublish" @closemodal="closemodal" @skiptopublish="skiptopublish" :childlish="childlish"></bottomList>

    </div>
</template>
<script>
import bottomList from "@/components/bottomList.vue"

export default {
     components:{
        bottomList
     },
    data(){
        return{
            picList:1,
            ispublish:true,
            isshowpublish:false,
            childlish:[{text:'拍摄'},{text:'从手机相册选择'}]
        }
    },
    methods:{
        returnTap(){
         this.$router.go(-1)
        },
        skipto(){
         this.$router.push({
             path:'/publishtarget'
         })
        },
        closemodal(){
            this.isshowpublish = !this.isshowpublish
        },
        skiptopublish(){
            
        }
    }
}
</script>
<style  scoped>
.top_btn_list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 10px ;
    height: 60px;
    background: #4AC7D7;
    color: #fff;
}
.title{
font-weight: 600;
}
.publish_btn{
    height: 30px;
    width: 55px;
    line-height: 30px;
    text-align: center;
    background: #fff;
    color: #000;
    border-radius: 5px;
    
}
.input_text{
    height:100px;
    margin:0 30px;
    /* border-bottom: 1px solid #e3e4e5; */
}
.input_text #textarea{
    height: 100px;
    width: 100%;
    border: none;
    outline: none;
    resize:none
}
.list{
   
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
     margin:0 30px;
     border-bottom: 1px solid #e3e4e5;
}
.border_top{
     border-top: 1px solid #e3e4e5;
     margin-top: 20px;

}
.list_left{
      display: flex;
    align-items: center;
}
.location_icon{
    width: 25px;
    height: 25px;
}
.list_title{
    margin-left: 10px;
}
.more_icon{
 margin-left: 20px;
    width: 15px;
    height: 15px;
}
.main_pictures{
    display: flex;
    flex-wrap: wrap;
    margin-left: 30px;
}
.main_pictures_lattice{
    width: 80px;
    height: 80px;
    margin: 0 8px 8px 0;
}
.add_box{
    width: 80px;
    height: 80px;
     margin: 0 8px 8px 0;
     display: flex;
     justify-content: center;
     align-items: center;
     background: #EEE;
}
.add_box img{
    width: 30px;
    height: 30px;
}
</style>